<template>
  <div :class="['app', 'app--' + $route.name]">
    <transition name="fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {

}
</script>

<style>

.app {
  color: #2c3e50;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
/*active绑定transition*/
.fade-enter-active, .fade-leave-active{
  transition: all 1s ease;
}
/*fade-enter-->fade-enter-active===fade-leave(展示状态)-->*/
.fade-enter {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
}
/*初态（0,0）--->离开*/
.fade-leave-active {
  opacity: 0;
  transform: translate3d(100px, 0, 0);
}
</style>
